<script setup>
import orderApis from '@/apis/order'
import {ElMessage} from 'element-plus';
import {useRoute, useRouter} from "vue-router";
import {ArrowLeft} from "@element-plus/icons-vue";

const route = useRoute()
const payType = ref(null)
const router = useRouter()


function createOrder() {
  return orderApis.createOrder({
    skuIds: route.query.ids,
    remark: '',
    recommendId:'1933076155318321152',
    // recommendId: route.query.recommendId||null,
  })
}

function confirmPay() {
  if (!payType.value) {
    ElMessage({
      message: '请选择支付方式',
      type: 'warning'
    })
    return
  }
  createOrder().then(res => {
    router.push({
      path: '/buyCenter/order/payType', query: {
        ...route.query,
        // ids: route.query.ids,
        id: res.data.id,
        payType: payType.value,
        expiredDate:res.data.expiredDate,
      }
    })
  })
}
</script>

<template>
  <div class="pay-container">
    <div class="pay-content">
      <div class="the-content">
        <el-button text type="primary" :icon="ArrowLeft" @click="router.go(-1)">返回</el-button>
        <div class="wrap">
          <div class="contentWrap">
            <div class="feeWrap"><span class="text1">待支付</span> <span class="text2 unit">￥</span><span class="text2">{{
                Number(route.query.p).toFixed(2)
              }}</span>
            </div>
            <!-- <div class="restTime">
                <div>剩余支付时间</div>
                <div class="timeBox"><span>07</span><span>:</span><span>23</span></div>
            </div> -->
            <div class="payType">
              <div class="payTypeTitle">选择支付方式：</div>
              <div class="payTypeListBox">
                <el-radio-group v-model="payType">
                  <div class="payTypeList">
                    <el-radio label="ALIPAY">
                      <div style="display: flex;align-items: center;">
                        <img
                            src=""
                            alt="支付宝" class="payTypeIcon"> <span class="payTypeName">支付宝</span>
                      </div>
                    </el-radio>
                  </div>
                  <div class="lineBorder"></div>
                  <div class="payTypeList">
                    <el-radio label="WEIXIN">
                      <div style="display: flex;align-items: center;">
                        <img
                            src=""
                            alt="微信" class="payTypeIcon"> <span class="payTypeName">微信</span>
                      </div>

                    </el-radio>
                  </div>
                  <div class="lineBorder"></div>
                </el-radio-group>

              </div>
            </div>
          </div>
          <div class="btnConfirm">
            <el-button type="primary" @click="confirmPay">确认付款</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.pay-container {
  background: url('@/assets/images/app_background.png');
  background-size: cover;
}

.pay-content {
  width: 1400px;
  margin: 0 auto;
  padding: 50px 0;
  box-sizing: border-box;
}

.the-content {
  background: white;
  border-radius: 12px;
  padding: 16px;
}

.feeWrap {
  text-align: center;
  color: #2b2e33;
  font-weight: 700;
}

.feeWrap .text1 {
  font-size: 24px;

}

.feeWrap .text2 {
  font-size: 40px;
  color: #e63c23;
  font-weight: bolder;
}

.feeWrap .text2.unit {
  font-size: 22px;
}

.payType {
  padding: 0 50px;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.payType .payTypeTitle {
  text-align: left;
  color: #2b2e33;
  font-size: 18px;
  line-height: 18px;
}

.payTypeListBox {
  text-align: left;
}
.btnConfirm{
  text-align: right;
}
.payTypeListBox{
  display: flex;
  flex-direction: column;
}
.payType ::v-deep(.el-radio-group){
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  font-size: 0;
  padding: 16px 0;
  gap: 16px;
}
.payTypeList img{
  width: 32px;
  height: 32px;
}
</style>